<template>
  <div
    class="display-flex justify-content-flex-justify"
    style="flex-direction: column;height: 100%"
  >
    <div class="pageHead display-flex flex-direction-column">
      <x-header
        :left-options="{backText: '',preventGoBack:true}"
        @on-click-back="goHomePage"
        style="z-index: 9999!important;"
      >
        <span>收藏列表</span>
      </x-header>
    </div>

    <div class="main">
      <scroller
        :style="tabNum==3?'margin-left: 1.66rem;':null"
        :class="tabNum==3?'tab3R':'scrollerStyle'"
        :on-refresh="refresh"
        :on-infinite="getList"
        ref="my_scroller_tab1"
        :noDataText="this.$noData(list)"
      >
        <good-item-two
          :list="list"
          @collect="collect"
          :shopZeroSaleState="shopZeroSaleState"
          :tabNum="0"
        ></good-item-two>
      </scroller>

      <scroller
        class="scrollerBox"
        ref="my_scroller_tab1"
        :noDataText="this.$noData(list)"
        v-if="false"
      >
        <ul class="list">
          <li class="item display-flex" v-for="(item, index) in list" :key="item.id">
            <img :src="item.defaultPhoto" class="thumb" alt />
            <div class="right display-flex justify-content-flex-justify">
              <div>
                <div class="top display-flex justify-content-flex-justify">
                  <p class="name">[{{item.brandName}}]{{item.name}}</p>
                  <p
                    class="collect"
                    @click.stop="collect(index)"
                  >{{item.collectType == 1 ? '取消收藏' : '收藏'}}</p>
                </div>
                <div class="spec">{{item.spec}}</div>
              </div>
              <div
                class="display-flex justify-content-flex-justify align-items-center"
                v-for="(j,childJIndex) in item.unitVOList"
                :key="childJIndex"
                style="border-bottom: 1px solid rgb(202, 202, 202); padding-bottom: .1rem; margin-bottom: .1rem"
              >
                <p class="price">
                  ￥
                  <span
                    class="num"
                  >{{j.unitGoodsPricesVO?(j.unitGoodsPricesVO.discountTaxPrice?j.unitGoodsPricesVO.discountTaxPrice:j.unitGoodsPricesVO.taxPrice):''}}</span>
                  <span
                    style="color: rgb(153, 153, 153)"
                  >/{{j.unitGoodsPricesVO?j.unitGoodsPricesVO.unitName:''}}</span>
                </p>
                <!--<img src="@/assets/img/cart/+@2x.png" class="icon" alt="">-->
                <div class="operation display-flex flex-direction-row" @click.stop>
                  <!--item.enquiry==0-->
                  <img
                    style="width: .46rem;height: .46rem;"
                    @click="reduceFn(j,item)"
                    v-show="j.shoppingCartVO&&j.shoppingCartVO.num>0"
                    src="@/assets/img/cart/-@2x.png"
                    alt
                  />
                  <p
                    v-show="j.shoppingCartVO&&j.shoppingCartVO.num>0"
                    @click="inputCountFn(j,item)"
                    class="display-flex flex-direction-row align-items-center justify-content-flex-center"
                  >
                    <span
                      :style="{color:((shopZeroSaleState==1&&j.shoppingCartVO.num>j.goodsStock)?'#C9333C':((item.zeroSaleFlag==1&&j.shoppingCartVO.num>j.goodsStock)?'#C9333C':'#000000'))}"
                    >{{j.shoppingCartVO?j.shoppingCartVO.num:''}}</span>
                  </p>
                  <img v-if="j.stockFlag" src="@/assets/img/order/addSlices2x.png" alt />
                  <img
                    v-if="!j.stockFlag"
                    style="width: .46rem;height: .46rem;"
                    @click="addFn(j,item)"
                    src="@/assets/img/cart/+@2x.png"
                    alt
                  />
                </div>
              </div>
            </div>
          </li>
          <li style="height: .5rem"></li>
        </ul>
      </scroller>
    </div>
  </div>
</template>

<script>
import goodItemTwo from "@/components/good-item-two.vue";
export default {
  name: "goodCollect",
  components: {
    goodItemTwo
  },
  data() {
    return {
      list: [],
      shopZeroSaleState: null,
      page: 1,
      noData: false,
      isLoad: false
    };
  },
  methods: {
    goHomePage() {
      // this.$callJava({ code: 1007 });
      // this.$router.go(-1)
      this.$router.replace({
        path: "/purchase/storePage",
        query: {
          id: this.$route.query.id
            ? this.$route.query.id
            : this.$route.query.sellerId,
          from: this.$fromApp(this) ? "app" : ''
        }
      });
    },
    refresh() {
      this.initList()
      this.getList();
    },
    initList() {
      this.page = 1;
      this.noData = false;
      this.isLoad = false;
      this.list = [];
      if (this.$refs.my_scroller_tab1) {
        this.$refs.my_scroller_tab1.finishInfinite(false);
      }
    },
    getList(done) {
      if(this.isLoad || this.noData) return;
      this.isLoad = true;
      this.$ajax.get(
        "replenish/collect/list",
        res => {
          this.isLoad = false;
          if (res.code == 200) {
            let list = res.data;
            for (let i = 0; i < list.length; i++) {
              for (let j = 0; j < list[i].unitVOList.length; j++) {
                if (!list[i].unitVOList[j].shoppingCartVO) {
                  list[i].unitVOList[j].shoppingCartVO = { num: 0 };
                }
                if (
                  this.shopZeroSaleState == 0 &&
                  list[i].zeroSaleFlag == 0
                ) {
                  list[i].unitVOList[j].stockFlag = false;
                } else {
                  if (
                    list[i].unitVOList[j].shoppingCartVO.num >=
                    list[i].unitVOList[j].goodsStock
                  ) {
                    list[i].unitVOList[j].stockFlag = true;
                  } else {
                    list[i].unitVOList[j].stockFlag = false;
                  }
                }
              }
            }
            if(!list || !list.length){
              this.noData = true;
            }
            if(typeof done == 'funciton'){
              done()
            }
            this.list = this.list.concat(list);
          }
          this.$refs.my_scroller_tab1.finishInfinite(true);
          this.$refs.my_scroller_tab1.finishPullToRefresh();
          this.isLoad = false;
        },
        { pageNo: this.page++, pageSize: 10, sellerId: this.$route.query.id }
      );
    },
    // 收藏
    collect(index) {
      var list = this.list;
      var goodsId = list[index]["id"];
      var collectType = list[index]["collectType"];
      var api = "replenish/collect/addCollect"; // 默认收藏
      if (collectType == 1) {
        api = "replenish/collect/delete";
      }
      this.$ajax.post(api, { goodsId }, res => {
        console.log(res);
        if (collectType == 0) {
          list[index]["collectType"] = 1;
        } else {
          list[index]["collectType"] = 0;
        }
      });
    }
  },
  created() {
    this.initList()
    this.getList();
    
    //获取经销商信息
    this.$ajax.get(
      "common/distributor/info",
      res => {
        if (res.code == "200" && res.data) {
          console.log("经销商信息：", res);
          this.shopInfo = res.data;
          this.shopZeroSaleState = res.data.zeroSaleFlag;
        }
      },
      { distributorId: this.$route.query.id }
    );
  },
  mounted(){
    this.$callJava({ onBackPressed: true });
    this.oldOnBackPressed = window["onBackPressed"]
    window["onBackPressed"] = this.goHomePage.bind(this);
  },
  destroyed() {
    window["onBackPressed"] = this.oldOnBackPressed;
    this.$callJava({ onBackPressed: false });
  }
};
</script>

<style scoped lang="less">
.main {
  flex: 1;
}
.list {
  padding: 0.3rem;
  .item {
    list-style: none;
    margin-bottom: 0.3rem;
  }
  .thumb {
    width: 1.84rem;
    height: 1.84rem;
    margin-right: 0.2rem;
  }
  .top {
    margin-bottom: 0.1rem;
  }
  .name {
    font-size: 0.28rem;
    color: #333333;
  }
  .right {
    flex-direction: column;
    flex: 1;
  }
  .icon {
    width: 0.46rem;
    height: 0.46rem;
  }
  .price {
    color: #fb6e52;
    font-size: 0.12rem;
    .num {
      font-size: 18px;
    }
  }
  .spec {
    color: #999999;
    height: 0.32rem;
    line-height: 0.32rem;
    background: #eeeeee;
    font-size: 10px;
    padding: 0 0.1rem;
    width: fit-content;
    border-radius: 0.16rem;
  }
  .collect {
    width: 1.18rem;
    height: 0.35rem;
    line-height: 0.35rem;
    text-align: center;
    background: #b6c5e5;
    border-radius: 0.22rem;
    color: #ffffff;
    font-size: 0.2rem;
  }
  .operation {
    img {
      width: 0.46rem;
      height: 0.46rem;
    }
    p {
      margin: 0 0.1rem;
      width: 0.6rem;
      height: 0.5rem;
      border-radius: 2px;
      background-color: #eeeeee;
    }
  }
}
</style>
